<template>
  <div class="writing_page">
    <div class="page_head">
      <div class="width-style">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-button type="text" style="font-size: 16px" @click="goHome"
              >全民健康网</el-button
            >
          </el-col>
          <el-col :span="16">
            <div class="title_ipt_wrap">
              <span style="font-size: 14px">撰写文章：</span>
              <el-input
                placeholder="请输入标题（最多100字）"
                v-model="keywords"
                style="width: 600px"
              >
              </el-input>
              <div class="title_ipt_wrap_author">
<!--                {{isAdd}}-->
<!--                {{ArticleDetail}}-->
                <span style="font-size: 14px">原作者：</span>
                <el-tag style="font-size: 14px" v-if="ArticleDetail.authorName">{{ ArticleDetail.authorName }}</el-tag>
                <el-tag style="font-size: 14px" v-if="!ArticleDetail.authorName">{{ userName }}</el-tag>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <el-button type="text" @click="goPersonalCenter"
              >个人中心</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="page_body">
      <div class="width-style card">
        <!--        <el-input placeholder="请输入内容" v-model="content" />-->
        <Toolbar
          style="border-bottom: 1px solid #ccc;"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 800px; overflow-y: hidden;text-align:left"
          v-model="content"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>
    </div>
    <div class="page_foo">
      <div class="width-style">
        <el-button type="primary" plain @click="createDrafts">保存</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">提交</el-button>
      </div>
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="发布设置"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <el-form :model="subForm" label-width="90px">
<!--        <el-form-item label="封面：">-->
<!--          <el-radio-group v-model="subForm.cover">-->
<!--            <el-radio label="single">单图</el-radio>-->
<!--            <el-radio label="multiple">多图</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="上传封面：">
          <el-button
            class="el-upload el-upload--picture-card"
            @click="onImport()"
            v-show="showUpload && !proofImage"
          >
            <i class="el-icon-plus"></i>
          </el-button>
          <template v-if="proofImage">
            <el-image
              style="width: 100px; height: 100px"
              :src="proofImage"
              :preview-src-list="[proofImage]"
            >
            </el-image>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              circle
              @click="proofImage = ''"
            ></el-button>
          </template>
          <el-upload
            v-show="!showUpload"
            ref="uploadFiles"
            :action="uploadFileUrl"
            :headers="{
              Authorization: authorization,
            }"
            accept=".jpg, .png"
            :limit="1"
            :show-file-list="false"
            :on-success="handlePictureCardSuccess"
            :on-remove="handleUploadRemove"
          >
          </el-upload>
        </el-form-item>
        <el-form-item label="文章分类：">
          <el-cascader
            ref="cascader"
            style="width: 230px"
            v-model="catalogueId"
            :options="classify"
            :props="{
              checkStrictly: true,
              emitPath: false,
              expandTrigger: 'hover',
              value: 'cataId',
              label: 'cataName',
            }"
          >
            <template slot-scope="{ node, data }">
              <div @click="handleChange(data)">
                <span v-if="data.cataId>=5">{{data.cataName}}</span>
<!--                <span>children{{data.children.length}}</span>-->
<!--                <span>node.isLeaf{{node.isLeaf}}</span>-->
<!--                <span v-if="!node.isLeaf && data.children.length">-->
<!--                  ({{ data.children.length }})-->
<!--                </span>-->
              </div>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="作者：">
          <el-tag>{{ qmUserInfo.userName }}</el-tag>
        </el-form-item>
        <el-form-item label="文章类型：">
          <el-radio-group v-model="subForm.type">
            <el-radio label="0">原创</el-radio>
            <el-radio label="1">转载</el-radio>
            <!--            <el-radio label="modify">改写</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="附言：">
          <el-input
            style="width: 202px"
            v-model="subForm.note"
            placeholder="方便审核人员快速审核"
          ></el-input>
        </el-form-item>
        <el-form-item label="重要度：">
          <el-input
            type="number"
            style="width: 202px"
            v-model="subForm.importance"
            placeholder="请输入1-100"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createArticle">发布</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title=""
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="subSuccessPop"
    >
      <el-result icon="success" title="发布成功">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="subSuccessPop = false"
            >确定</el-button
          >
        </template>
      </el-result>
    </el-dialog>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "writing",
  middleware: ['authenticated'],
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        // excludeKeys: [
        //   'uploadImage',//排除上传图片
        //   'uploadVideo',//排除上传视频
        //    // 排除菜单组，写菜单组 key 的值即可
        // ]
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            // metaWithUrl: true,
            base64LimitSize: 10 * 1024 * 1024, // 10M 以下插入 base64
            // server: 'http://124.222.236.194:8080/ruoyi-admin/profile/picture',
          },
        },
      },
      mode: "default",
      uploadFileUrl: "http://124.222.236.194:8080/ruoyi-admin/profile/picture",
      authorization: "",
      content: "",
      options: {},
      toolBarwidth: "550px",
      keywords: "",
      dialogVisible: false,
      subSuccessPop: false,
      subForm: {
        artId: null,
        // cover: "single",
        category: "",
        type: "0",
        author: "",
        importance: "",
        note: "",
      },
      catalogueId: undefined,
      catalogueName: "",
      value: [],
      // classify: [
      //   {
      //     value: "1",
      //     label: "人体使用手册",
      //     children: [
      //       {
      //         value: "1-1",
      //         label: "身体常识",
      //         children: [
      //           {
      //             value: "1-1-1",
      //             label: "呼吸系统",
      //           },
      //           {
      //             value: "1-1-2",
      //             label: "血液系统",
      //           },
      //           {
      //             value: "1-1-3",
      //             label: "消化系统",
      //           },
      //           {
      //             value: "1-1-4",
      //             label: "运动系统",
      //           },
      //           {
      //             value: "1-1-5",
      //             label: "防护系统",
      //           },
      //         ],
      //       },
      //       {
      //         value: "1-2",
      //         label: "生活习惯",
      //       },
      //       {
      //         value: "1-3",
      //         label: "活动指南",
      //       },
      //     ],
      //   },
      //   {
      //     value: "2",
      //     label: "现代医学篇",
      //     children: [
      //       {
      //         value: "2-1",
      //         label: "指导思想",
      //         children: [
      //           {
      //             value: "2-1-1",
      //             label: "生理学常识",
      //           },
      //           {
      //             value: "2-1-2",
      //             label: "病理学常识",
      //           },
      //           {
      //             value: "2-1-3",
      //             label: "药物学常识",
      //           },
      //         ],
      //       },
      //       {
      //         value: "2-2",
      //         label: "诊断方法",
      //         children: [
      //           {
      //             value: "2-2-1",
      //             label: "病史问诊",
      //           },
      //           {
      //             value: "2-2-2",
      //             label: "体格检查",
      //           },
      //           {
      //             value: "2-2-3",
      //             label: "实验诊断",
      //           },
      //           {
      //             value: "2-2-4",
      //             label: "医学影像",
      //           },
      //           {
      //             value: "2-2-5",
      //             label: "介入诊断",
      //           },
      //         ],
      //       },
      //       {
      //         value: "2-3",
      //         label: "治疗方法",
      //         children: [
      //           {
      //             value: "2-3-1",
      //             label: "药物疗法",
      //           },
      //           {
      //             value: "2-3-2",
      //             label: "手术治疗",
      //           },
      //           {
      //             value: "2-3-3",
      //             label: "介入疗法",
      //           },
      //           {
      //             value: "2-3-4",
      //             label: "放射疗法",
      //           },
      //           {
      //             value: "2-3-5",
      //             label: "物理疗法",
      //           },
      //         ],
      //       },
      //       {
      //         value: "2-4",
      //         label: "康复指南",
      //       },
      //     ],
      //   },
      //   {
      //     value: "3",
      //     label: "传统医学篇",
      //     children: [
      //       {
      //         value: "3-1",
      //         label: "指导思想",
      //         children: [
      //           {
      //             value: "3-1-1",
      //             label: "分型辩证",
      //           },
      //           {
      //             value: "3-1-2",
      //             label: "中药机理",
      //           },
      //         ],
      //       },
      //       {
      //         value: "3-2",
      //         label: "诊断方法",
      //         children: [
      //           {
      //             value: "3-2-1",
      //             label: "诊法",
      //           },
      //           {
      //             value: "3-2-2",
      //             label: "诊病",
      //           },
      //           {
      //             value: "3-2-3",
      //             label: "辩证",
      //           },
      //           {
      //             value: "3-2-4",
      //             label: "病案",
      //           },
      //         ],
      //       },
      //       {
      //         value: "3-3",
      //         label: "治疗方法",
      //         children: [
      //           {
      //             value: "3-3-1",
      //             label: "中药汤剂",
      //           },
      //           {
      //             value: "3-3-2",
      //             label: "针灸疗法",
      //           },
      //           {
      //             value: "3-3-3",
      //             label: "推拿疗法",
      //           },
      //           {
      //             value: "3-3-4",
      //             label: "艾灸疗法",
      //           },
      //           {
      //             value: "3-3-5",
      //             label: "火罐疗法",
      //           },
      //           {
      //             value: "3-3-6",
      //             label: "敷贴疗法",
      //           },
      //           {
      //             value: "3-3-7",
      //             label: "现代演进",
      //           },
      //         ],
      //       },
      //       {
      //         value: "3-4",
      //         label: "养生保健",
      //         children: [
      //           {
      //             value: "3-4-1",
      //             label: "饮食养生",
      //           },
      //           {
      //             value: "3-4-2",
      //             label: "饮茶养生",
      //           },
      //           {
      //             value: "3-4-3",
      //             label: "饮酒养生",
      //           },
      //           {
      //             value: "3-4-4",
      //             label: "运动养生",
      //           },
      //           {
      //             value: "3-4-5",
      //             label: "其他养生",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: "4",
      //     label: "疾病预防篇",
      //     children: [
      //       {
      //         value: "4-1",
      //         label: "预防常识",
      //         children: [
      //           {
      //             value: "4-1-1",
      //             label: "生活习惯",
      //           },
      //           {
      //             value: "4-1-2",
      //             label: "身体活动",
      //           },
      //           {
      //             value: "4-1-3",
      //             label: "三级预防",
      //           },
      //           {
      //             value: "4-1-4",
      //             label: "临床预防",
      //           },
      //           {
      //             value: "4-1-5",
      //             label: "公共卫生",
      //           },
      //           {
      //             value: "4-1-6",
      //             label: "职业病防治",
      //           },
      //         ],
      //       },
      //       {
      //         value: "4-2",
      //         label: "常见传染病",
      //         children: [
      //           {
      //             value: "4-2-1",
      //             label: "呼吸道传染病",
      //           },
      //           {
      //             value: "4-2-2",
      //             label: "胃肠道传染病",
      //           },
      //           {
      //             value: "4-2-3",
      //             label: "皮肤传染病",
      //           },
      //           {
      //             value: "4-2-4",
      //             label: "性传播疾病",
      //           },
      //           {
      //             value: "4-2-5",
      //             label: "其他传染病",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: "5",
      //     label: "心理健康指南",
      //     children: [
      //       {
      //         value: "5-1",
      //         label: "心理卫生常识",
      //         children: [
      //           {
      //             value: "5-1-1",
      //             label: "心理学",
      //           },
      //           {
      //             value: "5-1-2",
      //             label: "心理健康",
      //           },
      //           {
      //             value: "5-1-3",
      //             label: "心理卫生",
      //           },
      //         ],
      //       },
      //       {
      //         value: "5-2",
      //         label: "心理行为问题",
      //         children: [
      //           {
      //             value: "5-2-1",
      //             label: "不良生活习惯",
      //           },
      //           {
      //             value: "5-2-2",
      //             label: "致病性行为模式",
      //           },
      //           {
      //             value: "5-2-3",
      //             label: "不良疾病行为",
      //           },
      //         ],
      //       },
      //       {
      //         value: "5-2-4",
      //         label: "网络成瘾",
      //       },
      //       {
      //         value: "5-2-5",
      //         label: "沉迷游戏",
      //       },
      //     ],
      //   },
      //   {
      //     value: "6",
      //     label: "常见慢性病分类",
      //     children: [
      //       {
      //         value: "6-1",
      //         label: "慢性呼吸道疾病",
      //         children: [
      //           {
      //             value: "6-1-1",
      //             label: "慢性支气管炎",
      //           },
      //           {
      //             value: "6-1-2",
      //             label: "慢性支气管扩张症",
      //           },
      //           {
      //             value: "6-1-3",
      //             label: "慢阻肺肺气肿",
      //           },
      //           {
      //             value: "6-1-4",
      //             label: "肺脓肿",
      //           },
      //           {
      //             value: "6-1-5",
      //             label: "慢性肺心病",
      //           },
      //           {
      //             value: "6-1-6",
      //             label: "支气管哮喘",
      //           },
      //           {
      //             value: "6-1-7",
      //             label: "慢性呼气衰竭",
      //           },
      //           {
      //             value: "6-1-8",
      //             label: "肺结核",
      //           },
      //           {
      //             value: "6-1-9",
      //             label: "肺纤维化",
      //           },
      //           {
      //             value: "6-1-10",
      //             label: "肺部脓肿",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     value: "7",
      //     label: "传统医学养生",
      //     children: [
      //       {
      //         value: "7-1",
      //         label: "食疗养生",
      //       },
      //       {
      //         value: "7-2",
      //         label: "艾灸疗法",
      //       },
      //       {
      //         value: "7-3",
      //         label: "针灸疗法",
      //       },
      //       {
      //         value: "7-4",
      //         label: "推拿法",
      //       },
      //     ],
      //   },
      //   {
      //     value: "8",
      //     label: "新冠防治",
      //     children: [
      //       {
      //         value: "8-1",
      //         label: "疫情速报",
      //       },
      //       {
      //         value: "8-2",
      //         label: "病毒变种",
      //       },
      //       {
      //         value: "8-3",
      //         label: "个人防护",
      //       },
      //       {
      //         value: "8-4",
      //         label: "各地防控",
      //       },
      //     ],
      //   },
      //   {
      //     value: "9",
      //     label: "医学前沿",
      //     children: [
      //       {
      //         value: "9-1",
      //         label: "分子医学",
      //       },
      //       {
      //         value: "9-2",
      //         label: "细胞医学",
      //       },
      //       {
      //         value: "9-3",
      //         label: "元素平衡疗法",
      //       },
      //       {
      //         value: "9-4",
      //         label: "信息医学",
      //       },
      //       {
      //         value: "9-5",
      //         label: "磁场疗法",
      //       },
      //       {
      //         value: "9-6",
      //         label: "光疗法",
      //       },
      //       {
      //         value: "9-7",
      //         label: "自然疗法",
      //       },
      //       {
      //         value: "9-8",
      //         label: "免疫疗法",
      //       },
      //       {
      //         value: "9-9",
      //         label: "基因疗法",
      //       },
      //     ],
      //   },
      // ],
      ArticleDetail: {},
      isAdd: true, //默认为新增
      proofImage: "",
      showUpload: true,
      qmUserInfo: {},
      userName: '',
    };
  },
  async asyncData({ app, store, route }) {
    if (route.query && route.query.artId) {
      const res = await app.api.reqArticle(route.query.artId);
      // console.log(app.$cookies.get(app.api.TOKENKEY))
      console.log(res.data)
      return {
        ArticleDetail: res.data,
        // authorization: app.$cookies.get("token"),
      };
    }
  },

  mounted() {
    // this.authorization = this.$cookies.get("token");
    this.qmUserInfo=JSON.parse(localStorage.getItem('qmUserInfo'))
    this.authorization=this.$cookies.get(this.$api.TOKENKEY)
    this.getArtcatalogueList();
    this.getUserInfo();
    if (JSON.stringify(this.ArticleDetail) === "{}"){ //判断文章是新增还是修改
      this.isAdd = true;
    }
    else{
      this.isAdd = false; //编辑修改
      this.proofImage = this.ArticleDetail.thumbnail;
      this.subForm.artId = this.ArticleDetail.artId;
      this.subForm.type = this.ArticleDetail.artType;
      this.catalogueId = this.ArticleDetail.catalogueId + "";
      this.catalogueName = this.ArticleDetail.catalogueName;
      this.content = this.ArticleDetail.content;
      this.subForm.note = this.ArticleDetail.remark;
      this.keywords = this.ArticleDetail.title;
    }
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    async getUserInfo() {
      const res = await this.$api.reqUserInfo();
      // console.log(res.user);
      if(res.code===200) {
        this.qmUserInfo = res.user;
        this.userName = res.user.userName;
      }
    },
    // 获取文章分类
    async getArtcatalogueList() {
      const res = await this.$api.reqArtsList();
      const deepArr = (arr) => {
        return arr.map((el) => {
          el.cataId = el.cataId + "";
          if (el.children && el.children.length) {
            deepArr(el.children);
          }
          return el;
        });
      };
      if (res.data) {
        this.classify = deepArr(res.data);
      }
    },
    // 上传文章封面
    onImport() {
      if (!this.proofImage) {
        this.$refs.uploadFiles.$refs["upload-inner"].handleClick();
      }
    },
    handleChange(nodeData) {
      this.catalogueId = nodeData.cataId;
      this.catalogueName = nodeData.cataName;
      this.$refs.cascader.checkedValue = nodeData.cataId;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);
    },
    pubSubClick() {
      this.dialogVisible = false;
      this.subSuccessPop = true;
    },
    //通过getFile方法获取文件信息
    getFile(file, fileList) {
      // console.log(file, "file");
    },
    // 预览和删除
    handleUploadRemove(file, fileList) {
      // console.log(this.proofImage, "这个是base64的编码值");
      this.proofImage = "";
    },
    handlePictureCardSuccess(file) {
      // console.log(file);
      this.proofImage = file.url;
      // console.log(this.proofImage);
    },
    goHome() {
      let link = this.$router.resolve({
        path: "/home",
      });
      window.open(link.href, "_blank");
    },
    goPersonalCenter() {
      let link = this.$router.resolve({
        path: "/personalcenter",
      });
      window.open(link.href, "_blank");
    },
    async createDrafts() {
      const res = await this.$api.reqDrafts({
        context: this.content,
        draftId: null,
        title: this.keywords,
        uploadId: this.qmUserInfo.userId, //用户ID全局获取之后替换
      });
      if(res.code===200){
        this.$message({
          type: "success",
          message: "保存成功",
        });
      }
    },
    async submit(param) {
      if (this.isAdd) {
        const res = await this.$api.reqAddArticle(param);
        if (res.code === 200) {
          this.dialogVisible = false;
          this.subSuccessPop = true;
        }
      } else {
        const res = await this.$api.reqUpdateArticle(param);
        if (res.code === 200) {
          this.dialogVisible = false;
          this.subSuccessPop = true;
        }
      }
    },
    createArticle() {
      if (!this.content || !this.keywords) {
        return;
      }
      const param = {
        artId: this.subForm.artId,
        artType: this.subForm.type,
        authorId: this.qmUserInfo.userId, //用户ID全局获取之后替换
        authorName: this.qmUserInfo.userName, //用户全局获取之后替换
        catalogueId: this.catalogueId - 0,
        catalogueName: this.catalogueName,
        content: this.content,
        // createBy: "string",
        // createTime: "2022-04-24T14:37:37.095Z",
        // deleteFlag: "string",
        favorites: 0,
        hits: 0,
        likes: 0,
        // params: {},
        // publishTime: new Date().toLocaleString().replaceAll("/", "-"),
        remark: this.subForm.note,
        // revieweFlag: "string",
        // searchValue: "string",
        thumbnail: this.proofImage,
        title: this.keywords,
        // updateBy: "string",
        // updateTime: "2022-04-24T14:37:37.095Z",
      };
      this.submit(param);
    },
  },
};
</script>

<style lang="scss" scoped>
.writing_page {
  width: 100%;
  background-color: #f6f7f9;
  text-align: left !important;
  padding-top: 62px;
  .page_head {
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    .title_ipt_wrap {
      display: flex;
      align-items: center;
    }
    .title_ipt_wrap_author {
      margin-left: 15px;
      display: flex;
      align-items: center;
    }
  }
  .page_body {
    .card {
      background-color: #fff;
      min-height: calc(100vh - 62px - 20px - 60px - 20px);
      margin-top: 20px;
      .ql-container {
        min-height: calc(100vh - 62px - 20px - 60px - 20px);
      }
      ::v-deep .ql-snow {
        border: 0 !important;
      }
    }
  }
  .page_foo {
    padding: 10px 0;
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    .width-style {
      text-align: right;
      padding-right: 100px;
      box-sizing: border-box;
    }
  }
}

//html * {
//  outline: 1px solid red;
//}
</style>
